<template>
  <div class="control-panel">
    <h3>控件模板</h3>
    <div class="control-list">
      <div class="control-item" v-for="control in controls" :key="control.type" @dragstart="dragStart(control)"
        draggable="true">
        <t-icon :name="control.icon" size="2em" />
        <span>{{ control.label }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const controls = ref([
  { type: 'text', label: '文本', icon: 'textbox', text: '文本'},
  { type: 'image', label: '图片', icon: 'image' },
  { type: 'table', label: '表格', icon: 'table', rows: 3, cols: 3 },
  { type: 'barcode', label: '条形码', icon: 'barcode' },
  { type: 'qrcode', label: '二维码', icon: 'qrcode' },
]);

const dragStart = (control) => {
  event.dataTransfer.setData('text/plain', JSON.stringify(control));
};
</script>

<style scoped>
.control-panel {
  width: 200px;
  padding: 10px;
  background-color: #f5f5f5;
  border-right: 1px solid #ddd;
}

.control-list {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.control-item {
  width: calc(50% - 4px);
  aspect-ratio: 1;
  padding: 0;
  background-color: #fff;
  border-radius: 5px;
  cursor: grab;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.control-item:hover {
  background-color: #e9ecef;
}
</style>